<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>当当图书榜页面</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#d {
				width: 100%;
				margin: auto;
			}
			
			#d #d1:after {
				content: '';
				display: block;
				clear: both;
			}
			
			#d #d1 #d11 {
				float: left;
				margin-top: 10px;
				margin-left: 10px
			}
			
			#d #d1 #d12 {
				float: right;
				margin-right: 10px;
				margin-top: 25px;
				border: 1px solid #c8ece3;
				position: relative;
				background-color: #eafffa;
			}
			
			#d #d1 #d12 ul {
				list-style-type: none;
				margin-left: 10px;
				margin-right: 10px;
			}
			
			#d #d1 #d12 ul li {
				float: left;
				margin-left: 10px;
				margin-right: 10px;
			}
			
			#d #d1 #d12 ul li a {
				text-decoration: none;
				color: #7b7b7b;
				font-size: 13px;
				line-height: 30px;
			}
			
			#d #d1 #d12 ul li a:hover {
				color: blue;
			}
			
			#d #d1 #d12 img {
				position: absolute;
				top: -13px;
				left: 10px;
			}
			
			#d #d2 {
				background-color: #fe6915;
				margin: 5px 10px 10px 10px;
				padding: 5px;
			}
			
			#d #d2 ul {
				list-style-type: none;
			}
			
			#d #d2 ul li {
				float: left;
				margin-left: 20px;
				margin-top: 3px;
			}
			
			#d #d2 ul li a {
				text-decoration: none;
				color: #FFFFFF;
			}
			
			#d #d2 ul li a:hover {
				color: blue;
			}
			
			.clear:after {
				content: '';
				display: block;
				clear: both;
			}
			
			#d #d3 {
				margin-left: 10px;
			}
			
			#d #d3 img {
				width: 99%;
			}
			
			#d4 {
				width: 98%;
				border: 1px solid #cce9ac;
				margin: 10px;
				position: relative;
			}
			
			#d4 #d41 {
				margin-top: 20px;
				margin-bottom: 20px;
			}
			
			#d4 #d41 {
				position: relative;
				left: -14px;
			}
			
			#d #d4 #d42 {
				float: left;
				width: 60%;
				position: relative;
			}
			.clear:after {
				content: '';
				display: block;
				clear: both;
			}
			
			#d #d4 #d42 #d421 {
				float: left;
				width: 52%;
				position: relative;
			}
			
			#d #d4 #d42 #d421 #img2 {
				position: absolute;
				top: 20px;
				left: 20px;
			}
			
			#d #d4 #d42 #d422 {
				width: 45%;
				float: right;
			}
			
			#d #d4 #d42 #d422 h2 {
				color: #1a66b3;
				font-size: 16px;
			}
			
			
			#d #d4 #d42 #d422 p {
				color: #000000;
				font-size: 13px;
				line-height: 22px;
			}
			
			#d #d4 #d42 #d422 p span {
				color: #8e1187;
				font-weight: 600;
			}
			
			#d #d4 #d43 {
				width: 38%;
				float: right;
			}
			
			
			#d #d4 #d43 #d431 #d4311 {
				margin-top: 5px;
				width: 26%;
				float: left;
				position: relative;
				padding-right: 0;
			}
			#d #d4 #d43 #d431 #d4311 .img{
				margin-right:0 ;
			}  
			
			#d #d4 #d43 #d431 #d4311 #img3 {
				position: absolute;
				top: -5px;
				left: 5px;
			}
			
			#d #d4 #d43 #d431 #d4312 {
				margin-top: 5px;
				margin-left: 5px;
				margin-right: 5px;
				width: 70%;
				float: right;
			}
			#d #d4 #d43 #d432 #d4322 h5,
			#d #d4 #d43 #d431 #d4312 h5{
				color:#1a66b3 ;
			}
			#d #d4 #d43 #d432 #d4322 p,
			#d #d4 #d43 #d431 #d4312 p{
				font-size: 13px;
				line-height: 30px;
			}
			#d #d4 #d43 #d432 #d4322 p span,
			#d #d4 #d43 #d431 #d4312 p span{
				color: #8e112b;
			}
			
			#d #d4 #d43 #d432 #d4321{
				margin-top: 5px;
				width: 26%;
				float: left;
				position: relative;
			}
			#d #d4 #d43 #d432 #d4321 #img4{
				position: absolute;
				top: -5px;
				left: 5px;
			}
			#d #d4 #d43 #d432 #d4322 {
				margin-top: 5px;
				margin-left: 5px;
				margin-right: 5px;
				width: 70%;
				float: right;
			}
			#d5 p{
				color: #8493b5;
				font-size: 13px;
				display: inline-block;
				
			}
			
			#d5 p img{
				vertical-align: middle;
			}
			#d5{
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="d">
			<div id="d1">
				<div id="d11">
					<img src="logo.jpg" alt="当当网" />
				</div>
				<div id="d12">
					<ul>
						<li>
							<a href="">尾品汇</a>
						</li>
						<li>
							<a href="">当当优品</a>
						</li>
						<li>
							<a href="">数字馆</a>
						</li>
						<li>
							<a href="">都看阅器</a>
						</li>
					</ul>
					<img src="/icon_count.png" />
				</div>
			</div>
			<div id="d2" class="clear">
				<ul>
					<li>
						<a href="">首页</a>
					</li>
					<li>
						<a href="">图书 </a>
					</li>
					<li>
						<a href="">音像 </a>
					</li>
					<li>
						<a href="">童装</a>
					</li>
					<li>
						<a href="">服装</a>
					</li>
					<li>
						<a href="">鞋靴 </a>
					</li>
					<li>
						<a href="">运动 </a>
					</li>
					<li>
						<a href="">箱包 </a>
					</li>
					<li>
						<a href="">美妆 </a>
					</li>
					<li>
						<a href="">珠宝</a>
					</li>
					<li>
						<a href="">家居</a>
					</li>
					<li>
						<a href="">食品 </a>
					</li>
					<li>
						<a href="">酒水</a>
					</li>
					<li>
						<a href="">手机 </a>
					</li>
					<li>
						<a href="">数码 </a>
					</li>
					<li>
						<a href="">电脑</a>
					</li>
					<li>
						<a href="">家电</a>
					</li>
				</ul>
			</div>
			<div id="d3">
				<img src="banner.png" />
			</div>
			<div id="d4" class="clear" >
				<div id="d41">
					<img id="img1" src="bg_bang.gif" />
				</div>
				<div id="d42" class="clear">
					<div id="d421">
						<img src="book-01.jpg" />
						<img id="img2" src="bookNo1.gif" />
					</div>
					<div id="d422">
						<h2>偷影子的人 </h2>
						<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
						<p>出版社：湖南文艺出版社</p>
						<p>当当价：<span>￥ 17.90</span></p>
						<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
					</div>
				</div>
				<div id="d43">
					<div id="d431" class="clear">
						<div id="d4311">
							<img class="img" src="book-02.jpg" />
							<img id="img3" src="bookNo2.gif" />
						</div>
						<div id="d4312">
							<h5>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</h5>
							<p>作 者：柴静 著</p>
							<p>出版社：广西师范大学出版社</p>
							<p><span>￥ 29.40</span> 7.4折</p>
						</div>
					</div>
					<div id="d432" class="clear">
						<div id="d4321">
							<img src="book-03.jpg" />
							<img id="img4" src="bookNo3.gif" />
						</div>
						<div id="d4322">
							<h5>改变孩子先改变自己 </h5>
							<p>作 者：贾容韬 贾毅 著</p>
							<p>出版社：作家出版社</p>
							<p><span>￥ 22.20</span> 7.4折</p>

						</div>
					</div>
				</div>
			</div>
			<div id="d5">
				<p>Copyright (C) 当当网 2004-2017, All Rights Reserved</p>
				<p><img src="validate.gif" /> </p>
				<p>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
				
			</div>
		</div>
	</body>

</html>
